
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		
		
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="css/icons-extra.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" type="text/css" href="css/animate.css"/>
	</head>

	<body>

		
		<header class="mui-bar mui-bar-nav">
			
			<a class="mui-icon-extra mui-icon-extra-sweep" id="scan"></a>
			<h1 class="mui-title">resume</h1>
			<a class="mui-icon mui-icon-image" id="picture"></a>
			<div id="bcid" style="display: none;"></div>
            <div id="cbs" style="display: none;">关闭</div>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#tabbar">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">me</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-chat">
				<span class="mui-icon mui-icon-extra mui-icon-extra-dictionary"></span>
				<span class="mui-tab-label">skill</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-contact">
				<span class="mui-icon mui-icon-extra mui-icon-extra-class"></span>
				<span class="mui-tab-label">project</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-map">
				<span class="mui-icon mui-icon-extra mui-icon-extra-topic"></span>
				<span class="mui-tab-label">work</span>
			</a>
		</nav>
		<div class="mui-content">
			<div id="tabbar" class="mui-control-content mui-active">
                   <div class="mui-content">
						<div class="mui-card">
							<div class="mui-card-content">
								<div class="mui-card-content-inner">
									<div style="float: left;margin-left: 20px;margin-top: 20px;">
										<p><span>姓名：</span>&nbsp;夏正杰</p>
										<p><span>性别：</span>&nbsp;男</p>
										<p><span>籍贯：</span>&nbsp;浙江舟山</p>
										<p><span>年龄：</span>&nbsp;21</p>
									</div>
									<div style="float: right;">
										<img src="images/me.png" style="width: 180px;height: 180px;"/>
										
									</div>
								</div>
							</div>
						</div>
						<div class="mui-card">
							<div class="mui-card-header">毕业院校：浙江国际海运职业技术学院</div>
							<div class="mui-card-content">
								<img src="images/xx.jpg" alt="" style="width:99%;height: 180px;margin-left: 5px;"/>
							</div>
							
						</div>
						<div class="mui-card">
							<div class="mui-card-header">个人爱好</div>
							<div class="mui-card-content">
								<div class="mui-card-content-inner">
									钓鱼，看小说，踢足球，听相声，看美女
								</div>
							</div>
							
						</div>
						<div class="mui-card">
							<div class="mui-card-header">自我评价</div>
							<div class="mui-card-content">
								<div class="mui-card-content-inner">
									自信、乐观、责任心强。具有较好的团队组织能力、分析问题和宣传策划活动能力、协调能力等。学习方面也有较强的求知欲与良好的学习能力。为人真诚,惯于换位思考;对自己要求严格，做事情讲究效率;对程序的开发及测试方面很感兴趣;有较强的学习能力，适应行业的要求和新技术的挑战;有较强的求知欲、较强的学习能力。

								</div>
							</div>
							
						</div>
						
					</div>
				</div>	
			<div id="tabbar-with-chat" class="mui-control-content">
				<ul class="mui-table-view">	
				</ul>
			</div>
			<div id="tabbar-with-contact" class="mui-control-content">
				<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed" id="pro">
					<li class="mui-table-view-cell">
						<div class="mui-card">
							<div class="mui-card-header">页眉</div>
							<div class="mui-card-content">
								<div class="mui-card-content-inner">
									包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
								</div>
							</div>
						</div>
						
						<div class="mui-card">
							<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(../images/cbd.jpg)"></div>
							<div class="mui-card-content">
								<div class="mui-card-content-inner">
									<p>Posted on January 18, 2016</p>
									<p style="color: #333;">这里显示文章摘要，让读者对文章内容有个粗略的概念...</p>
								</div>
							</div>
							
						</div>
					</li>
					
					
				</ul>
			</div>
			<div id="tabbar-with-map" class="mui-control-content">
				
				<div class="mui-content">
			<div style="padding: 10px 10px;">
				<div id="segmentedControl" class="mui-segmented-control">
					<a class="mui-control-item mui-active" href="#item1">
				工作经历1
			</a>
					<a class="mui-control-item" href="#item2">
				工作经历2
			</a>
					<a class="mui-control-item" href="#item3">
				工作经历3
			</a>
				</div>
			</div>
			<div>
				<div class="works">
					<div id="item1" class="mui-control-content mui-active">								
						<div class="mui-table-view">
							
						</div>									
					</div>
				
					
				</div>
				
			</div>
			
			</div>	
		</div>	
		</div>
	</body>
	<script src="js/mui.min.js"></script>
	<script src="js/mui.zoom.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/mui.previewimage.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	
	<script>
		mui.init({
			swipeBack:false //启用右滑关闭功能
			
		});
		mui.previewImage();
	</script>
</html>













<!--var scan = null;
function onmarked( type, result ) {
	var text = '未知: ';
	switch(type){
		case plus.barcode.QR:
		text = 'QR: ';
		break;
		case plus.barcode.EAN13:
		text = 'EAN13: ';
		break;
		case plus.barcode.EAN8:
		text = 'EAN8: ';
		break;
	}
	alert( text+result );
}
var bcid=document.getElementById('bcid');
function onPlusReady() {
	var e = document.getElementById("scan");
	e.removeAttribute( "disabled" );
}
bcid.tap(function () {
    scan = new plus.barcode.Barcode('bcid');
	scan.onmarked = onmarked; 
    scan.start();
})-->